M

MLOG

Čeština

Odemkněte globální dosah s JavaScript Intl API. Naučte se osvědčené postupy internacionalizace pro formátování dat, čísel, měn a další, abyste zajistili bezproblémový uživatelský zážitek po celém světě.

JavaScript Intl API: Osvědčené postupy internacionalizace pro globální publikum

V dnešním propojeném světě je klíčové vytvářet webové aplikace, které osloví globální publikum. JavaScript Intl API poskytuje výkonné nástroje pro internacionalizaci (i18n), které vám umožní formátovat data, čísla, měny a další podle zvyklostí různých lokalit. Tento článek zkoumá osvědčené postupy pro využití Intl API k vytváření skutečně globálních aplikací.

Pochopení internacionalizace (i18n) a lokalizace (l10n)

Než se ponoříme do specifik Intl API, je důležité pochopit rozdíl mezi internacionalizací (i18n) a lokalizací (l10n). I18n je proces navrhování a vývoje aplikací tak, aby je bylo možné snadno přizpůsobit různým jazykům a regionům bez nutnosti technických změn. L10n je naopak proces přizpůsobení internacionalizované aplikace pro konkrétní lokalitu překladem textu a úpravou dalších prvků specifických pro danou lokalitu.

Intl API se zaměřuje na aspekt i18n a poskytuje mechanismy pro zpracování dat citlivých na lokalitu, zatímco lokalizace obvykle zahrnuje poskytování překladů a konfigurací specifických pro danou lokalitu.

Klíčové komponenty Intl API

Intl API se skládá z několika klíčových objektů, z nichž každý je zodpovědný za zpracování specifických aspektů internacionalizace:

Osvědčené postupy pro používání Intl API

Abyste efektivně využili Intl API a zajistili pozitivní uživatelský zážitek pro vaše globální publikum, zvažte následující osvědčené postupy:

1. Specifikujte správnou lokalitu

Základem internacionalizace je specifikace správné lokality. Lokalita identifikuje jazyk, region a jakékoli specifické varianty, které se mají použít pro formátování. Preferovanou lokalitu uživatele můžete získat z vlastnosti navigator.language nebo z HTTP hlavičky Accept-Language.

Při vytváření objektů Intl můžete specifikovat lokalitu jako řetězec nebo pole řetězců. Pokud poskytnete pole, API se pokusí najít nejlepší odpovídající lokalitu z dostupných možností.

Příklad:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Pokud preferovaná lokalita uživatele není k dispozici, můžete poskytnout záložní lokalitu. Například můžete použít 'en-US' jako výchozí, pokud prohlížeč uživatele hlásí nepodporovanou lokalitu.

2. Využijte Intl.DateTimeFormat pro formátování data a času

Správné formátování dat a časů je klíčové pro poskytnutí lokalizovaného zážitku. Objekt Intl.DateTimeFormat vám umožňuje formátovat data a časy podle konvencí specifické lokality.

Formátování můžete přizpůsobit specifikací různých možností, jako je formát roku, měsíce, dne, hodiny, minuty a sekundy. Můžete také specifikovat časové pásmo, abyste zajistili, že data a časy budou správně zobrazeny uživatelům v různých částech světa.

Příklad:

const locale = 'de-DE'; // Němčina (Německo)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Výstup: např. "22. Mai 2024, 14:30"
console.log(formattedDate);

Tento příklad formátuje aktuální datum a čas podle německé (Německo) lokality, včetně roku, měsíce, dne, hodiny a minuty. Také specifikuje časové pásmo 'Europe/Berlin'.

Nezapomeňte zvážit různé formáty data a času používané po celém světě. Například USA používají MM/DD/YYYY, zatímco mnoho jiných zemí používá DD/MM/YYYY.

3. Použijte Intl.NumberFormat pro formátování čísel, měn a procent

Objekt Intl.NumberFormat poskytuje flexibilní způsob formátování čísel, měn a procent podle konvencí specifických pro danou lokalitu. Formátování můžete přizpůsobit specifikací možností, jako je měna, styl (desetinný, měna nebo procento), minimální a maximální počet desetinných míst a další.

Příklad (Formátování měny):

const locale = 'ja-JP'; // Japonština (Japonsko)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Výstup: např. "￥12,346"
console.log(formattedAmount);

Tento příklad formátuje číslo 12345.67 jako japonský jen (JPY). Všimněte si, jak se symbol měny (￥) a oddělovač tisíců (,) automaticky upravují podle japonské lokality.

Příklad (Formátování procent):

const locale = 'ar-EG'; // Arabština (Egypt)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Výstup: např. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Tento příklad formátuje číslo 0.75 jako procento v arabštině (Egypt). Výstup zahrnuje arabský znak pro procenta (٪) a dvě desetinná místa.

Důležitá upozornění pro formátování měny:

4. Správně zpracujte plurály s Intl.PluralRules

Pravidla pro tvorbu plurálu se v jednotlivých jazycích výrazně liší. Například angličtina má jednoduchá pravidla s jednotným a množným číslem, zatímco jiné jazyky mají složitější pravidla založená na hodnotě čísla. Objekt Intl.PluralRules vám pomůže určit správný tvar plurálu pro dané číslo a lokalitu.

Příklad:

const locale = 'ru-RU'; // Ruština (Rusko)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (jednotné číslo)
    case 'few': return 'товара'; // tovara (několik)
    case 'many': return 'товаров'; // tovarov (mnoho)
    default: return 'товаров'; // Výchozí je mnoho
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Výstup: "5 товаров"

Tento příklad ukazuje, jak použít Intl.PluralRules k získání správného tvaru plurálu pro slovo "товар" (položka) v ruštině. Ruština má různé tvary plurálu v závislosti na tom, zda číslo končí na 1, 2-4 nebo 5-9.

5. Formátujte seznamy s Intl.ListFormat

Při prezentaci seznamů položek se formátování může v různých lokalitách lišit. Objekt Intl.ListFormat vám umožňuje formátovat seznamy podle konvencí specifických pro danou lokalitu, včetně použití různých spojek (např. "a", "nebo") a oddělovačů seznamu (např. čárky, středníky).

Příklad:

const locale = 'es-ES'; // Španělština (Španělsko)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Výstup: "manzanas, naranjas y plátanos"
console.log(formattedList);

Tento příklad formátuje seznam ovoce ve španělštině (Španělsko), přičemž používá spojku "y" (a) k propojení posledních dvou položek.

6. Formátujte relativní časy s Intl.RelativeTimeFormat

Zobrazování relativních časů (např. "včera", "za 2 hodiny") poskytuje uživatelsky přívětivý způsob prezentace časových informací. Objekt Intl.RelativeTimeFormat vám umožňuje formátovat relativní časy podle konvencí specifických pro danou lokalitu.

Příklad:

const locale = 'fr-CA'; // Francouzština (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Výstup: "hier"
console.log(rtf.format(2, 'day')); // Výstup: "dans 2 jours"

Tento příklad formátuje relativní časy ve francouzštině (Kanada). Výstup ukazuje "hier" (včera) a "dans 2 jours" (za 2 dny).

Možnost `numeric` řídí, jak se zobrazují čísla. `'auto'` zobrazuje relativní slova, pokud jsou k dispozici (jako "včera"), a jinak čísla. `'always'` vždy zobrazuje čísla.

7. Řaďte řetězce s Intl.Collator

Porovnávání řetězců je citlivé na lokalitu. Způsob, jakým jsou řetězce řazeny, se liší v závislosti na jazyce. Například v němčině se znak "ä" obvykle řadí jako "a", zatímco ve švédštině se řadí až za "z". Objekt `Intl.Collator` vám umožňuje porovnávat řetězce podle pravidel specifické lokality.

Příklad:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Výstup: ["äpfel", "aprikosen", "bananen", "birnen"]

Tento příklad řadí pole německých slov pomocí Intl.Collator. Všimněte si, že "äpfel" je seřazeno před "aprikosen", i když "ä" je v abecedě dále.

8. Zpracujte okrajové případy a chybějící data

Ne všechny lokality jsou podporovány každým prohlížečem nebo prostředím. Je nezbytné zpracovat okrajové případy, kdy lokalita není k dispozici nebo kdy data chybí. Zvažte následující strategie:

9. Důkladně testujte s různými lokalitami

Důkladné testování je klíčové pro zajištění, že vaše internacionalizovaná aplikace funguje správně pro všechny podporované lokality. Testujte svou aplikaci s různými lokalitami, včetně jazyků, které používají různé znakové sady, formáty data a času, formáty čísel a pravidla pro plurály.

Zvažte použití nástrojů pro automatizované testování k ověření, že se vaše aplikace chová podle očekávání v různých lokalitách.

10. Zvažte dopady na výkon

Ačkoli je Intl API obecně efektivní, vytváření objektů Intl může být relativně náročné. Pro optimalizaci výkonu zvažte následující:

Za hranicemi Intl API: Další aspekty internacionalizace

I když Intl API poskytuje výkonné nástroje pro formátování dat, internacionalizace zahrnuje více než jen formátování. Zvažte následující další aspekty:

Závěr

JavaScript Intl API je neocenitelným nástrojem pro tvorbu webových aplikací, které oslovují globální publikum. Dodržováním osvědčených postupů uvedených v tomto článku můžete vytvářet aplikace, které jsou nejen funkční, ale také kulturně citlivé a uživatelsky přívětivé pro uživatele po celém světě. Využijte sílu Intl API a odemkněte potenciál vaší aplikace na globální scéně. Zvládnutí Intl API povede k inkluzivnějšímu a přístupnějšímu zážitku pro všechny vaše uživatele, bez ohledu na jejich polohu nebo jazyk.